<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="type">
			<uv-radio-group v-model="state">
				<uv-radio
					shape="square"
					:customStyle="{margin: '8px'}" 
					v-for="(item, index) in payType" 
					:key="index" 
					:disabled="item.disabled"
					:label="item.name" 
					@change="typeChage"
					:name="item.id">
				</uv-radio>
			</uv-radio-group>
		</view>
		<view class="list">
			<view v-if="typeFlag" class="car_list">
					<text>银行名称：</text>
					<input class="uni-input" v-model="bankData.bankName" disabled type="text" />
			</view>
			<view v-if="typeFlag" class="car_list">
					<text>收款姓名：</text>
					<input class="uni-input" v-model="bankData.name" disabled  type="text" />
			</view>
			<view v-if="typeFlag"  class="car_list">
					<text>收款账号：</text>
					<input class="uni-input" v-model="bankData.card" disabled  type="text" />
			</view>
			<view class="car_list">
					<text>充值金额：</text>
					<input class="uni-input"  type="text" v-model="money"/>
			</view>
			<view class="skm" v-if="state==1">
				<image :src="wxData.qrcode" mode=""></image>
			</view>
			
			<view class="skm" v-if="state==2">
				<image :src="alipayData.qrcode" mode=""></image>
			</view>
			<view class="skm" @click="uploadEvent">
				<image :src="upload" mode=""></image>
			</view>
		</view>
		<view class="retrieve_submit">
			<button class="exitbtn" @click="submitClick">确认充值</button>
		</view>
		<view>
			今日所需充值上架费:{{onlineFee}}
		</view>
	</view>
</template>

<script>
	import { API_BASE_URL} from '@/utils/appConfig.js';
	import {rechargeMethod,rechargeData} from '@/api/user.js';
	export default{
		onLoad() {
			rechargeMethod().then(response=>{
				this.bankData = response.data.bank;
				this.wxData = response.data.wx;
				this.alipayData = response.data.alipay;
				this.onlineFee  = response.data.online_fee;
				if(this.bankData.status == 0){
					this.payType[2].disabled = true
				}else{
					this.payType[2].disabled = false
				}
				if(this.wxData.status == 0){
					this.payType[1].disabled = true
				}else{
					this.payType[1].disabled = false
				}
				if(this.alipayData.status == 0){
					this.payType[0].disabled = true
				}else{
					this.payType[0].disabled = false
				}
			});
			
		},
		data(){
			return{
				navstyle: {
					title: "充值",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				payType:[
					{
						name:'支付宝',
						id:1,
						disabled:false,
					},
					{
						name:'微信',
						id:2,
						disabled:false,
					},
					{
						name:'银行卡',
						id:3,
						disabled:false,
					}
				],
				money:"",
				onlineFee:0,
				state:0,
				typeFlag:false,
				bankData:{},
				wxData:{},
				alipayData:{},
				upload:'../../static/img/bonus/scpz.png',
			}
		},
		methods:{
			leftClick() {
				uni.reLaunch({
				  url: '/pages/user/money' // 替换成上一页的路径
				});
			},
			typeChage(item){
				this.state = item;
				if(item == 3){
					this.typeFlag = true
				}else{
					this.typeFlag = false
				}
			},
			uploadEvent() {
				var t = this;
				uni.chooseFile({
					count: 1,
					type: "image",
					success: function(e) {
						var n = e.tempFilePaths[0];
						t.uploadImagesEvent(n),
						uni.showLoading({
							title: "上传中",
							mask: !0
						})
					}
				})
			},
			uploadImagesEvent(t) {
				var e = this;
				uni.uploadFile({
					url: API_BASE_URL + "/index/upload",
					filePath: t,
					header: {
						token: uni.getStorageSync("token")
					},
					success: function(t) {
						var n = JSON.parse(t.data);
						1 != n.code && "1" != n.code || (e.upload = n.data.fullurl,
						uni.showToast({
							title: n.msg,
							icon: "success",
							duration: 2e3
						}))
					},
					fail: function(t) {
						console.log(t, "上传失败")
					},
					complete: function() {
						uni.hideLoading()
					}
				})
			},
			submitClick(){
				if(!this.money){
					uni.showToast({
						title: "请输入支付金额",
						icon: "success",
						duration: 2000
					});
					return
				}
				if(this.upload == "../../static/img/bonus/scpz.png"){
					uni.showToast({
						title: "请上传支付凭证",
						icon: "success",
						duration: 2000
					});
					return
				}
				let paytype="wx";
				if(this.state == 1){
					paytype="alipay"
				}else if(this.state == 2){
					paytype="wx"
				}else{
					paytype="bank"
				}
				rechargeData({
					"method":paytype,
					"money":this.money,
					"czpzimage":this.upload
					
				}).then(res=>{
					if(res.code == 1){
						uni.showToast({
							title: res.msg,
							duration: 1000
						});
						setTimeout(()=>{
							uni.navigateTo({
								url:'/pages/user/money'
							})	
						},2000)
					}
				})
			}
			
		}
	}
</script>

<style>
	.type{
		padding: 5px 0;
	}
	.uv-radio-group--row{
		justify-content: space-around;
	}
	.car_list {
	    display: flex;
	    align-items: center;
	    color: #3d4249;
	    width: 96%;
	    margin: auto;
	    margin-bottom: 10px;
	    padding: 10px;
	    border-radius: 3px;
	}
	.car_list .uni-input{
	    width: 70%;
	    height: 31px;
	    font-size: 16px;
	    line-height: 21px;
	    display: flex;
	    align-items: center;
	    background-color: #f1f1f1;
	    padding: 5px 10px 5px 5px;
	    border-radius: 4px 4px;
	}
	.skm{
	    width: 100%;
	    margin-top: 10px;
	    text-align: center;
	}
	.skm image{
	    width: 213px;
	    height: 213px;
	    border: #ed6266 solid 1px;
	    border-radius: 5px;
	}
	.retrieve_submit {
	    padding-bottom: 16px;
	    margin: 32px 32px 16px 32px;
	}
	.retrieve_submit button {
	    background: linear-gradient(#d66c6b, #ed6266);
	    border-radius: 26px;
	    color: #fff;
	    font-size: 14px;
	}
</style>